<script setup>
import { computed, ref } from 'vue'
import { useRouter, useRoute } from 'vue-router'
import { useEmployeeStore } from '@/stores'
import { ArrowDown } from '@element-plus/icons-vue'
import { employeeLogoutService } from '@/api/employee'

const employeeStore = useEmployeeStore()

const employeeInfo = computed(() => employeeStore.employeeInfo)

const router = useRouter()

const onlogout = async () => {
  await ElMessageBox.confirm('你确认退出登录吗？', '温馨提示', {
    type: 'warning',
    confirmButtonText: '确认',
    cancelButtonText: '取消'
  })
  const response = await employeeLogoutService()
  ElMessage.success(response.message)
  employeeStore.removeEmployeeInfo()
  router.push('/login')
}

// 处理下拉菜单的点击事件
const handlerCommand = (command) => {
  if (command === 'logout') {
    onlogout()
  } else {
    router.push(command)
  }
}

const route = useRoute()
const path = ref(route.path)
</script>

<template>
  <div class="welcome">
    <span>欢迎您，{{ employeeInfo.name }}</span>
    <el-dropdown @command="handlerCommand">
      <el-icon size="20" style="margin: auto 5px">
        <ArrowDown />
      </el-icon>

      <template #dropdown>
        <el-dropdown-menu>
          <el-dropdown-item command="/manage/employee/me">
            个人信息
          </el-dropdown-item>
          <el-dropdown-item command="/manage/employee/password">
            密码设置
          </el-dropdown-item>
          <el-dropdown-item command="/" v-if="path === '/' ? false : true">
            返回首页
          </el-dropdown-item>
          <el-dropdown-item
            command="/using"
            v-if="path === '/using' ? false : true"
          >
            前往使用
          </el-dropdown-item>
          <el-dropdown-item command="logout">退出登录</el-dropdown-item>
        </el-dropdown-menu>
      </template>
    </el-dropdown>
  </div>
</template>

<style lang="scss" scoped>
.welcome {
  position: fixed;
  top: 20px;
  left: 20px;
  font-size: 17px;
  font-weight: bold;
  color: #606266;
  cursor: pointer;

  display: flex;
  justify-content: start;

  :deep(.el-tooltip__trigger:focus-visible) {
    outline: none;
  }
}
</style>
